<!--
 * @Descripttion: 
 * @version: 
 * @Author: weni09
 * @Date: 2021-04-19 13:54:39
 * @LastEditors: weni09
 * @LastEditTime: 2021-06-12 21:26:41
 * @FilePath: \icoder-frontend\blog\src\components\Header.vue
-->
<template>
		<el-menu :default-active="getActiveIndex" class="d-flex" mode="horizontal" menu-trigger="hover" :router="true" type="flex" style="z-index:3000">
			<el-menu-item class="mr-auto logo" index="/home" @click="clickRefresh()">
			<svg class="icon icon-python" aria-hidden="true">
  							<use xlink:href="#icon-python"></use>
			</svg>ICODER</el-menu-item>
			<el-menu-item index="/home" @click="clickRefresh()">{{$t("header.home")}}</el-menu-item>
			<el-menu-item index="/archive">{{$t("header.archive")}}</el-menu-item>
			<el-menu-item index="/about">{{$t("header.about")}}</el-menu-item>
	
			<el-menu-item @click="toWriteArticle">写文章</el-menu-item>
			<el-submenu index="user" class="header-avatar" v-if="getAuth.user">
				<template slot="title">
					<el-avatar class="user-avatar"
					size="medium"
					:src="getAuth.user.avatar"
					:title="getAuth.user.nickname + ' 欢迎回来!'">
					</el-avatar>
				</template>
				<el-menu-item @click="logout">退出登录</el-menu-item>
			</el-submenu>
			<!-- <template v-for="(item,index) in loginOrRegister" v-else> -->
			<el-menu-item v-if="!getAuth.user">
			    <loginRegister></loginRegister>
			</el-menu-item>
			<!-- </template> -->
			<el-submenu index=null :router="false" class="header-lang" >
				<template slot="title">{{$t("header.language")}}</template>
				<el-menu-item @click="toggleLang('zh')" >{{$t("header.chinaese")}}</el-menu-item>
				<el-menu-item @click="toggleLang('en')" >{{$t("header.english")}}</el-menu-item>
			</el-submenu>
		</el-menu>
</template>

<script>
import loginRegister from 'components/LoginAndRegister';

export default {
	inject:['reload'],
	data() {
		return {
		};
	},
	watch:{
		$route:{
  			handler:function(route){
     		//  console.log(route);
 			},
  			immediate:true
		}
	},
	computed:{

		getActiveIndex:function(){
			return this.$route.path
		},

		getAuth:function(){
			// console.log(JSON.stringify(this.$store.getters.auth.user))
			return this.$store.getters.auth
		},
	},
	components:{
		loginRegister,
	},
	
	methods: {
		toggleLang(lang) {
			if(lang === 'zh') {
				localStorage.setItem('locale', 'zh')
				this.$i18n.locale = localStorage.getItem('locale')
				this.$message({
					message: '切换为中文！',
					type: 'success'
				})
			} else if(lang === 'en') {
				localStorage.setItem('locale', 'en')
				this.$i18n.locale = localStorage.getItem('locale')
				this.$message({
					message: 'Switch to English!',
					type: 'success'
				})
			}
		},
		//点击时，刷新对应组件
		clickRefresh(){
			this.reload();
		},
		//点击时，清空授权状态，退出登录
		logout(){
			const username = this.$store.getters.auth.user.username;
			// console.log(this.$store.getters.auth)
			this.$store.commit('SET_AUTH',{});
			// console.log(this.$store.getters.auth)
			this.$notify({
        		position: 'top-left',
        		type:"warning",
        		duration:3000,
        		showClose:false,
        		message: username +' 退出登录',
        		offset:100,
     		});
			 //废弃此处刷新，全局监控状态由登录变为未登录，跳转回首页。
			// this.reload(); //刷新当前路由
		},

		//点击后，登录就跳转写文章，没登录就跳出登录框
		toWriteArticle(){
			if (this.$store.getters.auth.token){
				this.$router.push('/article/edit')
			}
			else{
				this.$notify({
        		position: 'top-left',
        		type:"warning",
        		duration:3000,
        		showClose:false,
				dangerouslyUseHTMLString: true,
        		message: '请先登录',
        		offset:100,
     			});
				this.$store.dispatch('setLogResDialog',true);
				
			}
		}

	},
	mounted(){
	},
}
</script>

<style lang="scss" scoped>

</style>